<template>
  <view class="comp-a">
    <view class="comp-title">子组件A</view>
    <view class="comp-content">
      <text>父组件传进来的值：</text>
      <text class="value-text">{{ passValue }}</text>
    </view>
    <button class="btn" @click="sendToCompB">传值给CompB组件</button>
  </view>
</template>

<script>
export default {
  props: {
    passValue: {
      type: String,
      default: ""
    }
  },
  methods: {
    sendToCompB() {
      this.$emit("to-comp-b", this.passValue);
    }
  }
};
</script>

<style scoped>
.comp-a {
  background-color: #f9c74f;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.comp-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.comp-content {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.value-text {
  color: #d93600;
  font-weight: 500;
}

.btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 12rpx 25rpx;
  border-radius: 6rpx;
  font-size: 28rpx;
}
</style>